<template>
  <!-- 历史轨迹 -->
  <div class="track-page">
    <el-dialog
      v-el-drag-dialog
      title="气瓶历史踪迹"
      :visible.sync="visible"
      width="1200px"
      destroy-on-close
      @close="reset"
    >
      <div class="main">
        <baidu-map
          class="map"
          :center="center"
          :zoom="zoom"
          :scroll-wheel-zoom="true"
          @ready="handler"
        >
          <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT" />
          <bm-marker v-for="(item, index) in trackList" :key="index" :position="{lng: item.lon, lat: item.lat}" :animation="item.lon===center.lng && item.lat===center.lat ? 'BMAP_ANIMATION_BOUNCE' : ''" />
        </baidu-map>

        <div ref="right" class="right">
          <span style="display: inline-block; margin-bottom: 10px;">气瓶历史踪迹</span>
          <i class="el-icon-caret-right location-icon" @click="fold('right')" />
          <el-timeline class="time">
            <el-timeline-item
              v-for="(item) in trackList"
              :key="new Date(item.regDt).getTime()"
              :timestamp="moment(item.regDt).format('YYYY-MM-DD HH:mm')"
              placement="top"
            >
              <i class="el-icon-location" style="color: #126EDC;" @click="getlocation(item)" />
              <div v-if="item.chipStatus === 1">
                来到主人{{ item.contact }}家，想我了打我主人电话{{ item.csmPhone }}哦^_^
                <div>{{ item.csmAddress }}</div>
              </div>
              <div v-else>
                离开主人{{ item.contact }}家，主人电话{{ item.csmPhone }}
                <div>{{ item.csmAddress }}</div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { queryBottleTraceData, queryCorpInfo } from '@/api'
  import moment from 'dayjs'

  export default {
    name: 'historicalTrack',
    data() {
      return {
        moment,
        visible: false,
        currentCity: null,
        map: null,
        marker: {
          lng: 0, lat: 0
        },
        center: { lng: '', lat: '' },
        zoom: 5,
        trackList: []
      }
    },
    created() {
      this.getCorpInfo()
    },
    methods: {
      handler({ BMap, map }) {
        this.zoom = 14
        this.map = map
        if (this.currentCity && this.currentCity !== '') {
          map.centerAndZoom(this.currentCity, 14)
        } else {
          new BMap.LocalCity().get(function(p) {
            map.centerAndZoom(new BMap.Point(p.center.lng, p.center.lat), p.level)
          })
        }
      },
      // 定位
      getlocation(row) {
        this.zoom = 15
        this.$set(this.marker, 'lat', row.lat)
        this.$set(this.marker, 'lng', row.lon)
        this.center = this.marker
      },
      // 折叠效果
      fold(refItem) {
        const classname = event.target.className
        const flag = classname.includes('right')
        if (flag) {
          event.target.className = 'el-icon-caret-left'
        } else {
          event.target.className = 'el-icon-caret-right'
        }
        const width = this.$refs[refItem].style.width
        if (width === '20px') {
          this.$refs[refItem].style.width = '300px'
          this.$refs[refItem].childNodes[0].style.display = 'block'
          this.$refs[refItem].childNodes[4].style.display = 'block'
        } else {
          this.$refs[refItem].style.width = '20px'
          this.$refs[refItem].childNodes[0].style.display = 'none'
          this.$refs[refItem].childNodes[4].style.display = 'none'
        }
      },
      open(temp) {
        this.temp = temp
        this.getTraceList(temp)
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
        })
      },
      async getTraceList(temp) {
        const res = await queryBottleTraceData({
          chipCode: temp.chipCode
        })
        this.trackList = res.data.reverse()
      },
      async getCorpInfo() {
        const res = await queryCorpInfo()
        if (res.data.city) this.currentCity = res.data.city
      },
      reset() {
        this.trackList = []
        this.map.clearOverlays()
        this.map = null
      }
    }
  }
</script>

<style lang='scss' scoped>
.track-page {
  /deep/ .el-dialog .el-dialog__body {
    max-height: 80vh;
  }
}
.main {
  display: flex;
  font-size: 14px;

  .map {
    width: 100%;
    height: calc(80vh - 100px);
  }

  .right {
    position: relative;
    width: 400px;
    height: calc(80vh - 123px);
    padding: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #777;
    transition: all 0.3s;

    i {
      position: absolute;
      top: 3px;
      right: 0;
    }
    .el-icon-location {
      color: #01999F;
    }

    .time {
      height: 100%;
      padding: 10px 0 0 10px;
      overflow-y: scroll;
      .el-timeline-item:first-child {
        /deep/ .el-timeline-item__timestamp,
        /deep/ .el-timeline-item__content {
          color: $dangerColor;
        }
      }
    }
  }
}
</style>
